<template>
	<div class="select-city" @touchmove.prevent=''>
		<div class="city-top">
			<span class="city-cancel" @click="cancel">取消</span>
			<span class="city-finish" @click="finish">完成</span>
		</div>
		<mt-picker :slots="slots" @change="onValuesChange"></mt-picker>
		
	</div>
	<div class="mask" @touchmove.prevent=''></div>
</template>

<script type="text/javascript">
	import Vue from 'vue';
	import { Picker } from 'mint-ui';
	Vue.component(Picker.name, Picker);	

	import cityData from '../../../static/json/citydata.json';


	export default {
	  methods: {
	  	cancel:function(){
	  		document.getElementsByClassName("mask")[0].style.display="none";
	  		document.getElementsByClassName("select-city")[0].style.bottom="-220px";
	  	},
	  	finish:function(){
	  		document.getElementsByClassName("mask")[0].style.display="none";
	  		let cityValue=document.getElementsByClassName("city-value")[0]
	  		document.getElementsByClassName("select-city")[0].style.bottom="-220px";
	  		cityValue.innerHTML=this.cityValue;
	  		cityValue.style.color="#333";


	  	},

	    onValuesChange(picker, values) {

	    	this.cityValue=picker.getValues();
	        var recity=[];//市
	        var rearea=[];//区


	        //滑动省
	  		for(var i=0;i<cityData.length;i++){
	  			// 如果省的name和选中的name一样⁄
	  			if(cityData[i].name==picker.getSlotValue(0)){

	  				//如果只有省没有市就把市和去清空
	  				//if(cityData[i].name=="台湾省" || cityData[i].name=="香港特别行政区" ||cityData[i].name=="澳门特别行政区"){
	  				if(cityData[i]['children']==undefined){
	  					picker.setSlotValues(1,[]);
	  					picker.setSlotValues(2,[]);
	  				}else{

	  					for(var j=0;j<cityData[i]['children'].length;j++){
	  						//把选中的省对应的市添加到数组里面
		  					recity.push(cityData[i]['children'][j].name);

		  					// 如果市的name和选中的name一样
		  					if(cityData[i]['children'][j].name==picker.getSlotValue(1)){

		  						//如果只有市 没有区
		  						if(cityData[i]['children'][j]['children']==undefined){
		  							picker.setSlotValues(2,[]);
		  						}else{
		  							for(var k=0;k<cityData[i]['children'][j]['children'].length;k++){

			  							//把选中的市对应的区添加到数组里面
			  							rearea.push(cityData[i]['children'][j]['children'][k].name);
			  						}
			  						//设置区
			  						picker.setSlotValues(2,rearea);
		  						}

		  						
		  					}
		  				}
		  				//设置市
		  				picker.setSlotValues(1,recity);
	  				}
	  			}
	  		}

		  	
	    }
	  },
	  data() {
	    return {
	      slots: [
	        {
	          flex: 1,
	          values: ["北京市", "天津市", "河北省", "山西省", "内蒙古自治区", "辽宁省", "吉林省", "黑龙江省", "上海市", "江苏省", "浙江省", "安徽省", "福建省", "江西省", "山东省", "河南省", "湖北省", "湖南省", "广东省", "广西壮族自治区", "海南省", "重庆市", "四川省", "贵州省", "云南省", "西藏自治区", "陕西省", "甘肃省", "青海省", "宁夏回族自治区", "新疆维吾尔自治区", "台湾省", "香港特别行政区", "澳门特别行政区"],
	          className: 'slot1',
	          textAlign: 'center'
	        }, {
	        	flex: 1,
	        	values:["市辖区", "县"],
	          	className: 'slot2',
	          	textAlign: 'center'
	        }, {
	          flex: 1,
	          values: ["东城区","西城区","朝阳区","丰台区","石景山区","海淀区","门头沟区","房山区","通州区","顺义区","昌平区","大兴区","怀柔区","平谷区"],
	          className: 'slot3',
	          textAlign: 'center'
	        }
	      ],
	      cityValue:'北京市,市辖区,东城区'
	      
	    };
	  }
	};



</script>

<style lang="scss">
	@import "../../assets/css/_functions.scss";	
	@import "../../assets/css/_variables.scss";	
	.mask{
		background:rgba(0,0,0,0.50);
		position: fixed;
		top: 0;
		left:0;
		width: 100%;
		height: 100%;
		z-index: 9;
		display: none;
	}
	.select-city{
		width: rem(375);
		position: fixed;
		transition: 0.3s;
		overflow: hidden;
		bottom: -220px;
		background:#ffffff;
		z-index: 99;
		.city-top{
			width: 100%;
			height: 40px;
			background:#fafbfc;
			display:flex;
			justify-content:space-between;

			span{
				font-size:14px;
				color:#0076ff;
				line-height: 16px;
				padding: 12px 10px;
				display: block;
				letter-spacing:0px;
				text-align:left;
				cursor: pointer;
			}
		}
	}

	.picker-item{
		font-size: rem(14);
	}
	.picker-selected{
		// height: rem(50)!important;
		// line-height: rem(50)!important;
		font-size: rem(17);
	}
	.slot1 .picker-selected +div{
		opacity: 0.8;
	}
	.slot1 .picker-selected +div +div{
		transform:skewX(20deg);
		opacity: 0.6;
	}

	.slot2 .picker-selected +div{
		opacity: 0.8;
	}
	.slot2 .picker-selected +div +div{
		opacity: 0.6;
	}

	.slot3 .picker-selected +div{
		opacity: 0.8;
	}
	.slot3 .picker-selected +div +div{
		transform:skewX(160deg);
		opacity: 0.6;
	}
	.picker-center-highlight:before, .picker-center-highlight:after {
		background-color:#BBBBBB !important;
	}
</style>